<template>
    <div class="padding20">
        <!--列表页-->
        <div v-show="showList">
            <!--条件查询-->
            <el-form :model="queryParam" label-position="left" size="small">
                <el-row :gutter="50" justify="start">
                    <el-col :xs="12" :sm="7">
                        <el-form-item label="类别名称:" label-width="80px">
                            <el-input v-model="queryParam.name" placeholder="类别名称" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <!--展开/收起-->
                    <el-col :xs="showMoreSearch?24:13" :sm="showMoreSearch?24:7">
                        <div style="float: left;overflow: hidden;">
                            <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                            <el-button size="small" @click="clearParam">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <!--操作按钮-->
            <div class="mi-container">
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-plus"
                           @click="show('insert_1')">新增一级类别
                </el-button>
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-plus"
                           @click="show('insert_2')">新增二级类别
                </el-button>
            </div>

            <!--表格数据-->
            <el-table  empty-text="当前条件下，暂无匹配数据"
                       :data="tableData" style="width: 100%"
                      highlight-current-row show-overflow-tooltip
                      lazy row-key="id"
                      :load="loadData"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                      @selection-change="selectionChange">
                <el-table-column label="类别名称" prop="name" align="left"/>
                <el-table-column label="级别" prop="pid" align="center">
                    <template slot-scope="scope">
                        <span> {{scope.row.pid | typeLevel}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="sort" align="center"/>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" plain size="mini" @click="show('update',scope.row,scope.$index)">
                            编辑
                        </el-button>
                        <!--                        <el-dropdown @command="handleCommand($event,scope.$index, scope.row)" style="margin-left: 10px">-->
                        <!--                            <el-button type="primary" plain size="mini">-->
                        <!--                                更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"/>-->
                        <!--                            </el-button>-->
                        <!--                            <el-dropdown-menu slot="dropdown">-->
                        <!--                                <el-dropdown-item command="delete"><i class="el-icon-delete"/>删除-->
                        <!--                                </el-dropdown-item>-->
                        <!--                            </el-dropdown-menu>-->
                        <!--                        </el-dropdown>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--编辑（新增/修改）-->
        <transition name="el-fade-in">
            <IndustryTypeEdit v-if="showEdit" :data="viewData" :option="viewOption" @close="close"/>
        </transition>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import Kit from "@/core/mixin/Kit";
    import {infoMsg, successMsg, warningMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import IndustryTypeEdit from "@/views/government/company/industry-type/edit.vue";

    @Component({
        name: 'IndustryTypeList',
        components: {
            Pagination,
            IndustryTypeEdit,
        },
    })
    export default class IndustryTypeList extends mixins(BaseVue, Kit) {
        //加载子分类
        loadData(row: any, treeNode: any, resolve: any) {
            $http.post(API.industryTypeList, {pid: row.id})
                .then((res: any) => {
                    if (res.success) {
                        resolve(res.data);
                        if (res.data.length == 0) {
                            warningMsg(row.name + "分类下，暂无二级分类数据")
                        }

                    }
                });
        }

        //切换视图
        show(type: any, data: any = {}, index: any = 0) {
            //赋值
            this.viewData = data;
            this.viewOption.type = type;
            this.viewOption.index = index;

            //详情
            if (type == "info") {
                this.viewOption.title = '分类详情';
                this.showInfo = true;
            }
            //新增
            if (type == "insert_1") {
                this.viewOption.title = '新增一级分类';
                this.showEdit = true;
                this.showList = false;
            }

            //新增
            if (type == "insert_2") {
                this.viewOption.title = '新增二级分类';
                this.showEdit = true;
                this.showList = false;
            }

            //修改
            if (type == "update") {
                this.viewOption.title = '修改分类';
                this.showEdit = true;
                this.showList = false;
            }
        }

        //视图关闭回调
        close(obj: any = {}) {
            this.showInfo = false;
            this.showEdit = false;
            setTimeout(() => {
                this.showList = true;
                if (obj.refresh) {
                    this.selectPage();
                }
            }, 200);
        }

        //初始化
        async mounted() {
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            page = {};
            page.pageSize = 100;
            page.currentPage = 1;
            this.pageData(API.industryTypePage, page)
                .then((res: any) => {
                });
        }

        //处理更多按钮事件
        handleCommand(command: any, index: any, row: any) {
            switch (command) {
                case "delete":
                    this.delete(row.id);
                    break;
            }
        }

        delete(id: any) {
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $http.post(API.industryTypeDelete, [id]).then((res: any) => {
                    if (res.success) {
                        this.selectPage();
                        successMsg("已删除");
                    }
                });
            }).catch(() => {
                infoMsg("已取消!")
            });
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }
    }

</script>

<style scoped type="scss">
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
